
<template>
      <div class="info_mian">
        <div class="box">
          <div class="info_box">
            <div class="info_font">
              <h2>剩余蓝豆</h2>
              <t-space size="10px" style="margin-top: 20px">
                <BeanIcon style="font-size: 18px;color:#2468F2 " />
                <span class="member_info_font">
                  <span style="color: #2468F2">{{bean_balance}}</span>
                  蓝豆（近30天即将到期的蓝豆数
                   <span style="color: #2468F2">{{bean_count}}</span>
                  ）
                </span>
              </t-space>
<!--              <p>ID：{{memberInfo.id}}</p>-->
            </div>
          </div>
          <div>
            <t-button @click="isDialogPlans = true"  theme="default" shape="round" size="large" style="background-color: #C8B992FF; color: #605B50FF;">充&nbsp;&nbsp;值</t-button>
          </div>
        </div>
        <div style="margin-top: 20px">
          <t-tabs :value="value1" size="medium" @change="onTabChange1">
            <t-tab-panel  :value="item.value" :label="item.label" :destroy-on-hide="false" v-for="(item,key) in beansTabList" :key="key">
              <t-table

                  row-key="index"
                  :data="data"
                  :columns="columns"
                  :stripe="stripe"
                  :bordered="bordered"
                  :loading="isLoading"
                  :hover="hover"
                  :table-layout="tableLayout ? 'auto' : 'fixed'"
                  :size="size"
                  :pagination="pagination"
                  :show-header="showHeader"
                  cell-empty-content="-"
                  resizable
                  lazy-load
                  @page-change="onPageChange"
                  :paginationAffixedBottom="true"
                  :selected-row-keys="selectedRowKeys"
                  maxHeight="100%"
              >
                <template v-if="item.value===1"></template>
                <template #source_type="{ row }">
                  <span v-if="row.source_type  === 1">
                    基础套餐
                  </span>
                  <span v-if="row.source_type  === 2">
                    加量包
                  </span>
                </template>
                <template #create_type="{ row }">
                  <span v-if="row.create_type  === 1">
                    自主购买
                  </span>
                  <span v-if="row.create_type  === 2">
                    系统赠送
                  </span>
                </template>
              </t-table>
            </t-tab-panel>
          </t-tabs>
        </div>




      </div>

  <t-dialog
      v-model:visible="isDialogPlans"
      header="蓝豆充值"
      width="50%"
      :footer="false"
  >
    <!-- 通过 props 传递参数 -->
    <BeansView v-if="isDialogPlans"  />
  </t-dialog>
</template>
<script setup>
import {ref} from "vue";
import {get} from "@/utils/api";
import config from "@/config";
import BeansView from "./BeansView.vue";
import PlansView from "@/views/member/PlansView.vue";
import {BeanIcon} from "tdesign-icons-vue-next";
const isDialogPlans = ref(false)
const beansTabList = ref([
  { label: '使用记录', value: 2 },
  { label: '获得记录', value: 1 },

]);
const value1 = ref(2);
const onTabChange1 = (newValue) => {
  value1.value = newValue;
  if(value1.value===1){

    getBeanRecords({
      current: 1,
      pageSize:8,
    });
  }else{

    getConsumptionRecords({
      current: 1,
      pageSize:8,
    });
  }
  // getConfig()
};

//表格部分
const data = ref([])
const total = 28;


const stripe = ref(true);
const bordered = ref(false);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);
const isLoading = ref(false);
const selectedRowKeys = ref([]);
const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 8,
  total,
});
const columns = ref()
const columns1 = ref([
  { colKey: 'source_type', title: '来源',width: 200},
  { colKey: 'create_type', title: '获得方式' },
  { colKey: 'total_beans', title: '蓝豆总数',width: 200},
  { colKey: 'used_beans', title: '已使用蓝豆'},
  { colKey: 'remaining_beans', title: '剩余蓝豆'},
  // { colKey: 'create_at', title: '时间' },
  { colKey: 'expire_date', title: '到期时间' },

]);

const columns2 = ref([

  { colKey: 'remark', title: '使用内容' },
  { colKey: 'create_at', title: '时间' },
  { colKey: 'beans_used', title: '数量' },

]);

const getBeanRecords = (paginationInfo) => {
  const { current, pageSize } = paginationInfo;
  columns.value = columns1.value
  get(config.getBeanRecords, {
    page:current,
    page_size:pageSize
  }).then((res) => {
    console.log("getBeanRecords",res)
    data.value = res.data.data.list
    pagination.value.total = res.data.data.page.total
  });
};

const getConsumptionRecords = (paginationInfo) => {
  const { current, pageSize } = paginationInfo;
  columns.value = columns2.value
  get(config.getConsumptionRecords, {
    page:current,
    page_size:pageSize
  }).then((res) => {
    console.log("getConsumptionRecords",res)
    data.value = res.data.data.list
    pagination.value.total = res.data.data.page.total
  })
}
getConsumptionRecords({
  current: 1,
  pageSize:8,
});
const onPageChange = async (pageInfo) => {
  console.log('page-change', pageInfo);
  if(value1.value===1){
    getBeanRecords(pageInfo);
  }else{
    getConsumptionRecords(pageInfo);
  }
};

const bean_balance = ref(0);
const bean_count = ref(0);
get(config.getBeanBalance,{}).then(res=>{
  console.log("getBeanBalance", res.data)
  bean_balance.value = Number(res.data.data.bean_balance || 0).toLocaleString()
  bean_count.value = Number(res.data.data.bean_count || 0).toLocaleString()
})

</script>
<style scoped>
.info_mian{
  padding: 20px 30px;
}
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.info_font{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 60px;
}
.info_font h2{
  font-size: 24px;
  font-weight: 600;
}
.info_font p{
  font-size: 12px;
  color: #adacac;
}
.guarder_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  background: linear-gradient(122deg, #cad1df 30.56%, #a3a9b5 73.87%);
  padding: 20px;
  border-radius: 10px;
}
.guarder_info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guarder_title{
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
  line-height: 1.8;
}
.guarder_time{
  font-size: 14px;
  color: #adacac;
}
.member_info_font{
  font-size: 16px;
  color: #adacac;
}
</style>
